<template>
  <div class="vue-particles">
    <vue-particles
      color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >
    </vue-particles>
    <div class="login-container">
      <el-card class="box-card">
        <el-form ref="form" class="form">
          <div class="login-title">网站导航系统</div>
          <el-form-item>
            <el-input
              class="login-input"
              placeholder="请输入用户名"
              v-model="username"
              prefix-icon="el-icon-user"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              class="login-input"
              v-model="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              class="login-verifycode"
              placeholder="验证码"
              v-model="verifyCode"
              prefix-icon="el-icon-user"
            ></el-input>
            <img
              :src="verifyCodeImg"
              class="verify-codeImg"
              title="点击换一个验证码"
              @click="codeImgClick"
            />
          </el-form-item>
          <div class="submit-button">
            <el-button @click="login" class="login-button">登录</el-button>
            <a @click="redirect"> 注册</a>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getToken, GetVerifyCode } from "@/api/user";


//Vue.use(VueParticles)
export default {
  name: "login",
  data () {
    return {
      username: "",
      password: "",
      verifyCode: "",
      verifyCodeImg: "",

    };
  },
  methods: {
    login () {
      getToken(this.username, this.password, this.verifyCode).then(
        (response) => {
          localStorage.setItem("authorization", "Bearer " + response.data);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.$router.push("front");
          document.getElementById("bgCanvas").remove()
        },
        (error) => {
          this.$message.error(error.message);
          this.getVerifyCode();
        }
      );
    },
    redirect () {
      this.$router.push("/register");
    },
    getVerifyCode () {
      GetVerifyCode().then(
        (result) => {
          this.verifyCodeImg = `data:image/png;base64,${result.data}`;
        }
      );

    },
    codeImgClick () {
      this.getVerifyCode()
    }
  },
  mounted () {
    // import("@/lib/ribbon")
    // import("@/lib/index")
    this.getVerifyCode();
  }
};
</script>


<style scoped>
.login-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
}
.login-title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 26px;
  font-family: Palatino, Garamond, Times, Georgia, serif;
}
.submit-button {
  text-align: center;
}
.login-button {
  margin-right: 50px;
}
.login-input {
  width: 300px;
}
.el-form-item {
  text-align: center;
}
.form {
  width: 300px;
  margin: auto;
}
.el-card {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.box-card {
  text-align: center;
}

.login-verifycode {
  float: left;
  width: 150px;
}
.verify-codeImg {
  vertical-align: middle;
  margin-left: 10px;
  float: left;
  cursor: pointer;
}
.vue-particles {
  background: linear-gradient(to right, #003973 0, #e5e5be 100%);
}
</style>
